<template>
    <div>
        <!-- 
            ###
            顶部展示
         -->
        <div style="height:80rpx;color: white;" :style="{ height: wrapheight ? '0' : '80rpx' }">
            <div style="position: fixed;left:0;top:0;width:100%;height:80rpx;background-color: #a707a5;z-index: 100;">
                <div v-if="!showback"
                    style="position: absolute;top:10rpx;left:30rpx;font-size: 40rpx;transform: scale(1.3);"
                    @click="show = true">&equiv;</div>
                <div v-if="showback" style="position: absolute;top:10rpx;left:30rpx;font-size: 40rpx;transform: scale(1.3);"
                    @click="goback">&lt;</div>
                <div style="padding-top:20rpx;font-size: 30rpx; font-weight: 800; text-align: center;">{{ customTitle ||
                    (titles
                        ||
                        'Uniapp Template') }}</div>
                <div style="position: absolute;top:20rpx;right:30rpx;width:40rpx;height:40rpx;background-color: _white;border-radius: 50%;"
                    v-if="righttop != 'hide' && righttop == 'setting'" @click="navto2({ path: '/pages/setting/index' })">
                    <image src="../assets/settings.png" style="width:100%;height:100%;transform: scale(1.3);"></image>
                </div>
                <div style="position: absolute;top:20rpx;right:30rpx;width:40rpx;height:40rpx;background-color: _white;border-radius: 50%;"
                    v-else-if="righttop != 'hide' && righttop == 'custom'" @click="emitfns">
                    <image src="../assets/more2.png" style="width:100%;height:100%;transform: scale(1.3);"></image>
                </div>
                <div style="position: absolute;top:20rpx;right:30rpx;width:40rpx;height:40rpx;background-color: white;border-radius: 50%;"
                    v-else-if="righttop != 'hide'" @click="navto2({ path: '/pages/personal/index' })">
                </div>
            </div>
        </div>
        <!-- 
            ###
            正文
         -->
        <div style="padding:20rpx;margin:10rpx 30rpx 30rpx;background-color: white;color: #333;font-size: 24rpx;border-radius: 10rpx;"
            v-if="!customTitle && nowposi != 'hide'">
            当前位置：<span v-for="(     v, i     ) in      subtitles     ">{{ v }}{{ i != subtitles.length - 1 ? ' / ' : ''
            }}</span>
        </div>
        <div style="padding:20rpx;margin:10rpx 30rpx 30rpx;background-color: white;color: #333;font-size: 24rpx;border-radius: 10rpx;"
            v-if="customTitle && nowposi != 'hide'">
            当前位置：{{ customTitle }}
        </div>
        <div :style="{ paddingBottom: showshopcar != 'hide' ? '170rpx' : '' }">
            <slot></slot>
        </div>

        <!-- 
            ### 
            导航方面的处理
         -->
        <u-popup v-model="show" mode="left">
            <div style="line-height: 140rpx;text-align: center;color: #333;">Uni template</div>
            <view style="margin-top:-50rpx; padding-bottom: 30rpx; width:600rpx; color:#333">
                <!-- # nav -->
                <div v-if="routelist && routelist.length">
                    <div v-for="     v      in      routelist     ">
                        <div style="padding:40rpx 40rpx 0rpx 40rpx;" :style="{ color: v.title == titles ? '#4d59fc' : '' }"
                            v-if="!v.children" @click="navto(v)">
                            {{ v.title ||
                                '-/-' }}</div>
                        <div v-if="v.children">
                            <div style="padding:40rpx 40rpx 0; color:#888" @click="navsets(v.group)">{{ v.title ||
                                '-/-' }}
                                <image src="../assets/down.png"
                                    style="float: right;margin-top:-10rpx; width:60rpx;height:60rpx"
                                    v-if="!navset[v.group]"></image>
                                <image src="../assets/up.png"
                                    style="float: right;margin-top:-10rpx;width:60rpx;height:60rpx" v-if="navset[v.group]">
                                </image>
                            </div>
                            <!--  -->
                            <div v-if="navset[v.group] && v.children && v.children.length">
                                <div v-for="     val      in      v.children     ">
                                    <div style="padding:40rpx 40rpx 0rpx 90rpx;"
                                        :style="{ color: val.title == titles ? '#4d59fc' : '' }" v-if="!val.children"
                                        @click="navto(val)">{{
                                            val.title ||
                                            '-/-' }}</div>
                                    <div v-if="val.children">
                                        <div style="padding:40rpx 40rpx 0rpx 90rpx;color:#888" @click="navsets(val.group)">
                                            {{ val.title ||
                                                '-/-' }}
                                            <image src="../assets/down.png"
                                                style="float: right;margin-top:-10rpx;width:60rpx;height:60rpx"
                                                v-if="!navset[val.group]"></image>
                                            <image src="../assets/up.png"
                                                style="float: right;margin-top:-10rpx;width:60rpx;height:60rpx"
                                                v-if="navset[val.group]"></image>
                                        </div>
                                        <!--  -->
                                        <div v-if="navset[val.group] && val.children && val.children.length">
                                            <div v-for="     val2      in      val.children     ">
                                                <div style="padding:40rpx 40rpx 0rpx 140rpx;"
                                                    :style="{ color: val2.title == titles ? '#4d59fc' : '' }"
                                                    v-if="!val2.children" @click="navto(val2)">
                                                    {{ val2.title ||
                                                        '-/-' }}
                                                </div>
                                                <div v-if="val2.children">
                                                    <div style="padding:40rpx 40rpx 0rpx 140rpx;color:#888"
                                                        @click="navsets(val2.group)">{{ val2.title ||
                                                            '-/-' }}
                                                        <image src="../assets/down.png"
                                                            style="float: right;margin-top:-10rpx;width:60rpx;height:60rpx"
                                                            v-if="!navset[val2.group]"></image>
                                                        <image src="../assets/up.png"
                                                            style="float: right;margin-top:-10rpx;width:60rpx;height:60rpx"
                                                            v-if="navset[val2.group]"></image>
                                                    </div>
                                                    <!--  -->
                                                    <div v-if="navset[val2.group] && val2.children && val2.children.length">
                                                        <div v-for="     val3      in      val2.children     ">
                                                            <div style="padding:40rpx 40rpx 0rpx 190rpx;"
                                                                :style="{ color: val3.title == titles ? '#4d59fc' : '' }"
                                                                v-if="!val3.children" @click="navto(val3)">
                                                                {{ val3.title ||
                                                                    '-/-' }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </view>
        </u-popup>
    </div>
</template>

<script>
//因为是移动端，初始导航设计层级极限是四级，可自行重构设计
import routelists from '../pages'
export default {
    props: [
        'showback', //是否切换到显示返回按钮
        'customTitle', //是否显示自定义标题
        'righttop', //是否显示右上角以及右上角的显示方式
        'nowposi', //是否显示当前位置
        'showshopcar', //是否显示购物车按钮
        'ifbottomfixed',//是否抬高右下角按钮的高度
        'wrapheight'
    ],
    data() {
        return {
            //项目路由导航表
            routelist: [],
            //其他配置
            show: false,
            navset: {},
            titles: '',
            path: '',
            subtitles: [],
        }
    },
    methods: {
        navsets(v) {
            if (!this.navset[v]) {
                this.navset[v] = 1
            } else {
                this.navset[v] = 0
            }
        },
        emitfns() {
            this.$emit('customFn')
        },
        //
        navto(v) {
            uni.redirectTo({
                url: v.path
            })
        },
        navto2(v) {
            uni.navigateTo({
                url: v.path
            })
        },
        goback() {
            uni.navigateBack({
                fail: uni.reLaunch({ url: '/pages/index/index' })
            })
        }
    },
    mounted() {
        //深克隆
        var depcl = (obj) => {
            var newobj = Array.isArray(obj) ? [] : {}
            if (obj && typeof obj === "object") {
                for (var i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        typeof obj[i] == 'object' ? newobj[i] = depcl(obj[i]) : newobj[i] = obj[i]
                    }
                }
            }
            return newobj
        }
        this.routelist = [
            ...depcl(routelists)
        ]
        //筛选判断，赋值
        var fn = (list, title, group) => {
            title = title
            group = group
            for (var i = 0; i < list.length; i++) {
                if (title) {
                    list[i].subtitles = [...(title && title.length && title || ['none'])].concat(list[i].subtitles || [list[i].title])
                } else if (list[i]) {
                    list[i].subtitles = [list[i].title || 'none']
                }
                if (group) {
                    list[i].groups = [...(group && group.length && group || ['none'])].concat(list[i].groups || [list[i].group])
                } else if (list[i]) {
                    list[i].groups = [list[i].group || 'none']
                }
                if (list[i].children && list[i].children.length) {
                    fn(list[i].children, list[i].subtitles, list[i].groups)
                }
            }
        }
        fn(this.routelist)
        var fn2 = (list) => {
            for (var i = 0; i < list.length; i++) {
                if (list[i].path == getCurrentPages()[0].$page.path) {
                    this.titles = list[i].title
                    this.path = list[i].path
                    this.subtitles = list[i].subtitles
                    for (var ind = 0; ind < list[i].groups.length; ind++) {
                        this.navsets(list[i].groups[ind])
                    }
                }
                if (list[i].children && list[i].children.length) {
                    fn2(list[i].children)
                }
            }
        }
        fn2(this.routelist)
        this.$setnavs(this.routelist)
    }
}
</script>